<template>
  <div class="container">
    <!-- 增加 -->
    <div class="header">
      <el-button
        type="primary"
        @click="dialogVisible = true"
        style="margin-bottom: 20px"
        >增加店铺</el-button
      >
      <el-dialog
        title="添加店铺"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
        :append-to-body="true"
      >
        <el-form label-width="80px">
          <el-form-item label="店铺名称">
            <el-input v-model="name"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址">
            <el-input v-model="address"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="telephone"></el-input>
          </el-form-item>
          <el-form-item label="店铺描述">
            <el-input v-model="desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addShopsBtn">确 定</el-button>
          <el-button @click="cancelHandle">取 消</el-button>
        </span>
      </el-dialog>
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item>
          <el-select
            v-model="form.region"
            placeholder="请选择查询条件"
            class="query"
            style="width: 160px; margin-right: 20px"
          >
            <el-option label="店铺名称" value="name"></el-option>
            <el-option label="店铺状态" value="isAvail"></el-option>
          </el-select>
          <el-form-item>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-button type="primary" class="referBtn" @click="searchHandle"
            >查询</el-button
          >
          <el-button type="primary" class="referBtn" @click="resetHandle"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="serial" label="序号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" align="center" width="140">
      </el-table-column>
      <el-table-column prop="address" label="店铺地址" align="left">
      </el-table-column>
      <el-table-column prop="telephone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="desc" label="店铺描述" width="200" align="center">
      </el-table-column>
      <el-table-column
        prop="isAvail"
        label="店铺状态"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.isAvail === '审核中'
                ? 'primary'
                : 'success' && scope.row.isAvail === '未通过'
                ? 'danger'
                : 'success' && scope.row.isAvail === '已通过'
                ? 'success'
                : 'info'
            "
            disable-transitions
            >{{ scope.row.isAvail }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="servicesId" label="店铺服务" align="center">
        <template slot-scope="scope">
          <el-button
            type="success"
            @click="servicesHandle(scope.row)"
            size="small"
            >服务</el-button
          >
          <el-dialog
            title="提示"
            :visible.sync="dialogVisibleServices"
            width="30%"
            :append-to-body="true"
          >
            <div class="flex">
              <table class="border back">
                <caption class="font">
                  所有服务
                </caption>
                <th class="border head">服务名称</th>
                <th class="border">操作</th>
                <tr
                  class="border"
                  v-for="(item, index) in servicesData"
                  :key="index"
                >
                  <td class="border td">
                    {{ item.name }}
                  </td>
                  <td class="border">
                    <el-button
                      type="primary"
                      class="anniu"
                      @click="addServices(index, scope.row)"
                      size="small"
                      >添加</el-button
                    >
                  </td>
                </tr>
              </table>

              <table class="border back">
                <caption class="font">
                  已添加的服务
                </caption>
                <th class="border head">店铺服务</th>
                <th class="border">操作</th>
                <tr
                  class="border"
                  v-for="(item, index) in servicesId"
                  :key="index"
                >
                  <td class="border td">
                    {{ item.name }}
                  </td>
                  <td class="border">
                    <el-button
                      type="primary"
                      @click="removeservce(index)"
                      size="small"
                      >移除</el-button
                    >
                  </td>
                </tr>
              </table>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="servceSure">确 定</el-button>
              <el-button @click="dialogVisibleServices = false"
                >取 消</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column prop="goodsId" label="店铺商品" align="center">
        <template slot-scope="scope">
          <el-button type="success" @click="goodsHandle(scope.row)" size="small"
            >商品</el-button
          >
          <el-dialog
            title="提示"
            :visible.sync="dialogVisibleGoods"
            width="30%"
            :append-to-body="true"
          >
            <div class="flex">
              <!-- 遍历未上线的商品 -->
              <table class="border back">
                <caption class="font">
                  所有商品
                </caption>
                <th class="border head">商品名称</th>
                <th class="border">操作</th>
                <tr
                  class="border"
                  v-for="(item, index) in goodsData"
                  :key="item.message"
                >
                  <td class="border td">
                    {{ item.name }}
                  </td>
                  <td class="border">
                    <el-button
                      type="primary"
                      class="anniu"
                      @click="addGoods(index, scope.row)"
                      size="small"
                      >添加</el-button
                    >
                  </td>
                </tr>
              </table>
              <!-- 遍历上线的商品 -->
              <table class="border back">
                <caption class="font">
                  已添加的商品
                </caption>
                <th class="border head">商品名称</th>
                <th class="border">操作</th>
                <tr
                  class="border"
                  v-for="(item, index) in goodsId"
                  :key="item.message"
                >
                  <td class="border td">
                    {{ item.name }}
                  </td>
                  <td class="border">
                    <el-button
                      type="primary"
                      @click="removeGoods(index)"
                      size="small"
                      >移除</el-button
                    >
                  </td>
                </tr>
              </table>
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="goodsSure">确 定</el-button>
              <el-button @click="dialogVisibleGoods = false">取 消</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            @click="updateHandle(scope.row)"
            type="primary"
            size="small"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="cancellationHandle(scope.row)"
            >注销</el-button
          >
        </template>
        <!-- 修改 -->
        <el-dialog
          title="修改店铺信息"
          :visible.sync="dialogUpdateVisible"
          width="40%"
          :before-close="handleClose"
          :append-to-body="true"
        >
          <el-form label-width="80px" :model="newTableData">
            <el-form-item label="店铺名称">
              <el-input v-model="newTableData.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址">
              <el-input v-model="newTableData.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="newTableData.telephone"></el-input>
            </el-form-item>
            <el-form-item label="店铺描述">
              <el-input v-model="newTableData.desc"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateBtn">确 定</el-button>
            <el-button @click="updateCancleHandle">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 注销 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisibleCancellation"
          width="30%"
          :before-close="handleClose"
          :append-to-body="true"
        >
          <span>你确定要注销该店铺吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogCancellationHandle"
              >确 定</el-button
            >
            <el-button @click="dialogVisibleCancellation = false"
              >取 消</el-button
            >
          </span>
        </el-dialog>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";
// import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogUpdateVisible: false,
      dialogVisibleGoods: false,
      dialogVisibleServices: false,
      dialogVisibleCancellation: false,
      dialogCancellation: {},
      newTableData: [],
      updataData: {}, // 修改的数据
      form: {
        region: "", // 查询选择项
        name: "", // 查询内容
      },
      currentPage: 0, // 当前显示页
      total: 0, // 总条数
      size: 0, // 每页显示条数
      totalPage: 0, // 总页数
      serial: null, // 序列号
      name: "", // 家居名称
      address: "", // 家居地址
      telephone: "", // 联系电话
      desc: "", // 家居描述
      isAvail: "", // 家居状态
      goodsData: [], //服务器商品
      goodsId: [], //上线的数据
      shopping: {}, //需要修改商品的

      servicesData: [], //服务的数据
      servicesId: [], //上线的数据
      updateServices: {}, //需要修改的服务
      amminId: "",
    };
  },
  mounted() {
    let obj = {
      typeId: "adminId",
      valueId: localStorage.getItem("shopAdminId"),
    };
    this.search(obj);
  },
  methods: {
    //商品按钮
    goodsHandle(row) {
      // 获取所有商品
      request
        .get(`/goods/all/${localStorage.getItem("shopAdminId")}`)
        .then((res) => {
          this.goodsData = res;
        });
      if (
        row.isAvail == "审核中" ||
        row.isAvail == "已注销" ||
        row.isAvail == "未通过"
      ) {
        this.$message({
          showClose: true,
          message: "账户在申请或注销中不可以添加",
          type: "warning",
        });
      } else {
        this.goodsId = row.goodsId;
        this.shopping = row;
        this.dialogVisibleGoods = true;
      }
    },
    //添加商品
    addGoods(index) {
      let flag = true;
      for (let i = 0; i < this.goodsId.length; i++) {
        if (this.goodsId[i]._id == this.goodsData[index]._id) {
          flag = false;
        }
      }
      if (flag) {
        this.goodsId.unshift(this.goodsData[index]);
      } else {
        this.$message({
          showClose: true,
          message: "上线服务中已经包含该服务",
          type: "warning",
        });
      }
    },
    //删除商品
    removeGoods(e) {
      this.goodsId.splice(e, 1);
    },
    //确认修改商品
    goodsSure() {
      this.dialogVisibleGoods = false;
      this.shopping.goodsId = this.goodsId;
      let arr = [];
      this.goodsId.forEach((item, index) => {
        arr.push(item._id);
      });
      request
        .put(`/shops/${this.shopping._id}`, { goodsId: arr })
        .then(({ data }) => {
          this.search({
            typeId: "adminId",
            valueId: localStorage.getItem("shopAdminId"),
          });
        });
    },
    // 弹出框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //服务按钮
    servicesHandle(row) {
      // 获取所有的服务
      request
        .get("/services/all/", {
          params: {
            typeId: "adminId",
            valueId: localStorage.getItem("shopAdminId"),
          },
        })
        .then((res) => {
          this.servicesData = res.rows;
        });
      if (
        row.isAvail == "审核中" ||
        row.isAvail == "已注销" ||
        row.isAvail == "未通过"
      ) {
        this.$message({
          showClose: true,
          message: "账户在申请或注销中不可以修改",
          type: "warning",
        });
      } else {
        this.servicesId = row.servicesId;
        this.updateServices = row;
        this.dialogVisibleServices = true;
      }
    },
    //添加服务
    addServices(index) {
      let flag = true;
      for (let i = 0; i < this.servicesId.length; i++) {
        if (this.servicesId[i]._id == this.servicesData[index]._id) {
          flag = false;
        }
      }
      if (flag) {
        this.servicesId.unshift(this.servicesData[index]);
      } else {
        this.$message({
          showClose: true,
          message: "上线服务中已经包含该服务",
          type: "warning",
        });
      }
    },
    //删除服务
    removeservce(index) {
      this.servicesId.splice(index, 1);
    },
    //确认修改服务
    servceSure() {
      this.dialogVisibleServices = false;
      this.updateServices.servicesId = this.servicesId;
      let arr = [];
      this.servicesId.forEach((item, index) => {
        arr.push(item._id);
      });
      request
        .put(`/shops/${this.updateServices._id}`, { servicesId: arr })
        .then((res) => {
          this.search({
            typeId: "adminId",
            valueId: localStorage.getItem("shopAdminId"),
          });
        });
    },
    // 增加店铺
    addShopsBtn() {
      this.dialogVisible = false;
      let obj = {
        serial: this.tableData.length + 1,
        name: this.name,
        address: this.address,
        telephone: this.telephone,
        desc: this.desc,
        isAvail: "审核中",
        adminId: localStorage.getItem("shopAdminId"),
      };
      request.post("/shops", obj).then((res) => {
        this.search({
          typeId: "adminId",
          valueId: localStorage.getItem("shopAdminId"),
        });
      });
      this.serial = "";
      this.name = "";
      this.address = "";
      this.telephone = "";
      this.desc = "";
      this.isAvail = "";
    },
    // 增加取消
    cancelHandle() {
      this.dialogVisible = false;
      this.serial = "";
      this.name = "";
      this.address = "";
      this.telephone = "";
      this.desc = "";
      this.isAvail = "";
    },
    // 修改按钮
    updateHandle(row) {
      this.updataData = row;
      if (
        row.isAvail == "审核中" ||
        row.isAvail == "已注销" ||
        row.isAvail == "未通过"
      ) {
        this.$message({
          showClose: true,
          message: "该店铺在申请中或注销中或未通过，暂时不能修改",
          type: "warning",
        });
      } else {
        this.newTableData = row;
        this.dialogUpdateVisible = true;
      }
    },
    //修改确认按钮
    updateBtn() {
      this.dialogUpdateVisible = false;
      request
        .put(`/shops/${this.updataData._id}`, {
          name: this.newTableData.name,
          address: this.newTableData.address,
          telephone: this.newTableData.telephone,
          desc: this.newTableData.desc,
          isAvail: "审核中",
          adminId: localStorage.getItem("shopAdminId"),
        })
        .then((res) => {
          this.search({
            typeId: "adminId",
            valueId: localStorage.getItem("shopAdminId"),
          });
        });
    },
    // 修改关闭按钮
    updateCancleHandle() {
      this.dialogUpdateVisible = false;
    },
    //注销
    cancellationHandle(row) {
      if (
        row.isAvail == "审核中" ||
        row.isAvail == "已注销" ||
        row.isAvail == "未通过"
      ) {
        this.$message({
          showClose: true,
          message: "该店铺在申请中或注销中或未通过，暂时不能修改",
          type: "warning",
        });
      } else {
        this.dialogCancellation = row;
        this.dialogVisibleCancellation = true;
      }
    },
    // 确认注销
    dialogCancellationHandle() {
      if (
        this.dialogCancellation.isAvail == "审核中" ||
        this.dialogCancellation.isAvail == "已注销" ||
        this.dialogCancellation.isAvail == "未通过"
      ) {
        this.$message({
          showClose: true,
          message: "该店铺在申请中或注销中或未通过，暂时不能修改",
          type: "warning",
        });
      } else {
        this.dialogCancellation.isAvail = "审核中";
        this.dialogVisibleCancellation = false;
        request
          .put(`/shops/${this.dialogCancellation._id}`, {
            isAvail: "审核中",
            adminId: localStorage.getItem("shopAdminId"),
          })
          .then((res) => {});
      }
    },
    // 搜索方法
    search(obj) {
      request.get("/shops/all", { params: obj }).then((res) => {
        this.tableData = res.rows;
        this.currentPage = parseInt(res.current);
        this.total = parseInt(res.total);
        this.size = parseInt(res.size);
        this.totalPage = parseInt(res.totalPage);
      });
    },
    // 查询选项
    filterTag(value, row) {
      return row.state === value;
    },
    // 搜索内容
    searchHandle() {
      let obj = {
        type: this.form.region,
        value: this.form.name,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };
      this.search(obj);
      this.form.region = this.form.name = "";
    },
    // 重置按钮
    resetHandle() {
      this.search({
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      });
      this.form.region = this.form.name = "";
    },
    // 显示条数更换
    handleSizeChange(val) {
      let obj = {
        size: val,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };
      this.search(obj);
    },
    // 每页点击更换
    handleCurrentChange(val) {
      let obj = {
        current: val,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };
      this.search(obj);
    },
    // 服务选择
    handleCheckAllChange(val) {
      this.checkedServices = val ? serviceArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedServicesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.services.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.services.length;
    },
    changeHandle() {
      if (this.value == "开通") {
        this.$refs.checkbox.style.cssText = "display:block";
      } else {
        this.$refs.checkbox.style.cssText = "display:none";
      }
    },
  },
};
</script>

<style>
.container {
  padding: 50px;
}
.header {
  display: flex;
  justify-content: space-between;
}
.right {
  text-align: center;
}
.block {
  margin-top: 20px;
}
.checkbox {
  display: none;
}
.optiom {
  height: 40px;
}

.fuwu {
  margin-bottom: 20px;
}
.flex {
  display: flex;
  justify-content: space-around;
}
.border {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
}
.back {
  width: 200px;
}
.font {
  font-size: 20px;
  margin-bottom: 10px;
}
.head {
  height: 30px;
  line-height: 30px;
}
.td {
  height: 43px !important;
}
.table-flex {
  display: flex;
  justify-content: space-between;
}
</style>
